<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			@font-face {
			  font-family: 'myfont';
			  src: url('../static/fonts/myfont.ttf') format('truetype'); /* 相对路径 */
			}
			html,body {
				background-color: #000000;
				color:#fff;
				font-family:  'myfont', sans-serif;
			}
			.music-icon{
				width: 1em;
				height: 1em;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				display: inline-block;
			}
			.icon-last{
				background-image:url(../images/last.png);
			}
			.icon-next{
				background-image:url(../images/next.png);
			}
			.icon-start{
				background-image:url(../images/start.png);
				margin:0 1rem;
			}
			.icon-pause{
				background-image:url(../images/pause.png);
				margin:0 1rem;
			}
			.image-rotate{
				animation: spin 8s linear infinite;
			}
			@keyframes spin {
			  0% {
			    transform: rotate(0deg);
			  }
			  100% {
			    transform: rotate(360deg);
			  }
			}
			.mui-content{
				background-color: #000000;
			}
			.detail-box{
				width:100vw;
				position: absolute;
				bottom:1rem;
				left:0;
			}
			.textArea{
				padding: 5vw;
				height: calc(80vh - 60vw);
				overflow-y: scroll;
				text-align: center;
				font-family:  'myfont', sans-serif; 
				position: relative;
				z-index: 2;
			}
			.textArea h5{
				color: #fff;
				font-size: 1.3rem;
				height: 40px;
				line-height: 40px;
				overflow-x: hidden;
			}
			.textArea-bg{
				  width:100%;
				  height:100%; position: absolute;
				  top: 0;
				  left: 0;
				  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%,rgba(0, 0, 0, 0.8) 45%, rgba(0, 0, 0, 0) 60%,rgba(0, 0, 0, 0.8) 80%,rgba(0, 0, 0, 0.7) 100%);
				  z-index: 3;
			}
			#musicNameDesc{
				text-align: center;
				color:#fff;
				margin-top:0.5rem;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<h4 id="musicNameDesc"></h4>
			<img  src="../images/disk.png"  style="width: 60vw;height: 60vw;margin:5vw 20vw;" id="imageDom" />
			<div style="position: relative;width: 100vw;height: 200px; " > 
				<div class="textArea-bg"></div>
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<div class="textArea" id="textArea">
						</div>
					</div>
				</div>
				
			</div>
			<div class="detail-box" style="display: flex;align-items: center;justify-content: center;font-size: 4em;">
				<span class="music-icon icon-last" ></span>
				<span class="music-icon icon-pause" id="changeStateDom"></span>
				<span class="music-icon icon-next"></span>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		let musicName = null;
		let music = null;
		let runTime = 0;
		let textArray = [];
		let runState = false; //记录是否在播放
		var renderTextInterval = null;//循环定时器，实时渲染歌词用
		mui.init({
			swipeBack:false ,//启用右滑关闭功能
			beforeback: function(){//退出页面前关闭循环定时器
					if(renderTextInterval){
						clearInterval(renderTextInterval)
					}
				}
		});
		mui.plusReady(function(){
			renderTextInterval = setInterval(function(){
					moveTextIndex()
			},1000);
			renderPage()
		})
		function renderPage(){
			musicName = localStorage.getItem('musicName');
			// if(musicName){
			// 	playMusic(musicName)
			// 	loadMusicText(musicName)
			// }
			addDataEventListen()
		}
		function playMusic(musicName_) {
		  musicName= musicName_
		  localStorage.setItem('musicName',musicName_);
		  document.body.querySelector('#musicNameDesc').innerHTML = musicName_.split('.')[0];
		  music = plus.audio.createPlayer( "http://124.70.73.91:29/music/"+musicName_);
		  music.play(); 
		  startRotate()
		  //结束后播放下一曲
		  music.addEventListener('ended',function(){
			  playNext()
		  })
		}
		function addDataEventListen(){
			mui(".detail-box").on('tap','.icon-last',function(e){
				playLast()
			}) 
			mui(".detail-box").on('tap','.icon-next',function(e){
				playNext()
			}) 
			mui(".detail-box").on('tap','.icon-start',function(e){
				const dom = document.getElementById("changeStateDom")
				dom.classList.remove("icon-start")
				dom.classList.add("icon-pause")
				playPause()    //点击播放键切换状态为暂停
			}) 
			mui(".detail-box").on('tap','.icon-pause',function(e){
				const dom = document.getElementById("changeStateDom")
				dom.classList.remove("icon-pause")
				dom.classList.add("icon-start")
				playStart()   //点击暂停键切换状态为播放
			}) 
		}
		function playLast(){
			const musicList =	localStorage.getItem('allMusicName').split(',')
			const tmpIndex = musicList.indexOf(localStorage.getItem('musicName'))
			const targetIndex = (tmpIndex-1< 0) ? (musicList.length-1) : tmpIndex-1 
			playMusic(musicList[targetIndex])
			loadMusicText(musicList[targetIndex])
		}
		function playNext(){
			const musicList =	localStorage.getItem('allMusicName').split(',')
			const tmpIndex = musicList.indexOf(localStorage.getItem('musicName'))
			const targetIndex =  (tmpIndex+1 < musicList.length) ? (tmpIndex+1) : 0
			playMusic(musicList[targetIndex])
			loadMusicText(musicList[targetIndex])
		}
		function playPause(){
			if(music){
				music.pause()
				stopRotate()
			}
		}
		function playStart(){
			if(music){
				music.resume()
				startRotate()
			}
			else{
				playMusic(musicName)
			}
		}
		function startRotate(){
			const imageDom = document.getElementById("imageDom")
			imageDom.classList.remove('image-rotate')
			imageDom.classList.add('image-rotate')
			runState = true
		}
		function stopRotate(){
			const imageDom = document.getElementById("imageDom")
			imageDom.classList.remove('image-rotate')
			runState = false
		}
		//下载歌词
		function loadMusicText(musicName_){
			const currentMusicName_  = localStorage.getItem('musicName')
			document.body.querySelector('.textArea').innerHTML = ""
			if(musicName_ == currentMusicName_){
				const url = 'http://124.70.73.91:29/music/'+musicName_.split('.')[0] +'.txt'
				try{
					mui.ajax({
					url: url,
					data: {},
					timeout: 3000,
					type: 'get',
					success: function(res) {
						let tmpTextArr = JSON.stringify(res).split('\\r')
						if(tmpTextArr.length<5){
							tmpTextArr = JSON.stringify(res).split('\\n')
						}
						textArray = tmpTextArr;
					},
					error:function(xhr,type,errorThrown){
						textArray = []
					}
					});
				}catch(e){
					//异常处理
				}
			}
		}
		//计算出渲染第几行 然后移动到相应位置
		function moveTextIndex(){
			if(music && runState ){
				if(textArray.length>5){
					runTime = music.getPosition()
					const minute = (Math.floor(runTime/60)>9) ? Math.floor(runTime/60) : ('0'+Math.floor(runTime/60))
					const second = (Math.floor(runTime%60)>9) ? Math.floor(runTime%60) : ('0'+Math.floor(runTime%60))
					const preText = '['+minute + ":" + second
					//console.log(preText)
					let currentIndex = -1
					textArray.forEach((item,index)=>{
						if(item.startsWith(preText) && (item.split(']').length == 2)){
							currentIndex = index
						}
					})
					if(currentIndex>0){
						console.log(currentIndex)
						//TODO 移动到相应行
						renderTextLine(currentIndex)
					}
				}
				else{
					document.body.querySelector('.textArea').innerHTML = "暂无歌词"
				}
			}
		}
		function renderTextLine(targetIndex){
			const target = document.body.querySelector('.textArea');
			target.innerHTML = ""
			if(targetIndex-2>=0){
				renderLine(targetIndex-2)
			}
			if(targetIndex-1>=0){
				renderLine(targetIndex-1)
			}
			renderLine(targetIndex)
			if(targetIndex+1<textArray.length){
				renderLine(targetIndex+1)
			}
			if(targetIndex+2<textArray.length){
				renderLine(targetIndex+2)
			}
			function renderLine(index){
				let li = document.createElement('h5');
				const text = textArray[index].split(']').length == 2 ? textArray[index].split(']')[1] : ""
				li.innerHTML = text;
				target.append(li);
			}
		}
	</script>
</html>